/*******************右侧功能栏********************************/
var rights=document.querySelector('.fixed').children;
var fixop=rights[0];
var poption=rights[1];
var fixlis=fixop.children[0].children;
var poptionlis=poption.children;
for(let i=0;i<fixlis.length-1;i++){
   fixlis[i].index=i;
   fixlis[i].addEventListener('mouseover',function(){
      poption.className="poption";
      for(let j=0;j<poptionlis.length;j++){
         fixlis[j].className="";
         poptionlis[j].style.display="none";
      }
      poptionlis[this.index].style.top+=60*i+'px';
      poptionlis[this.index].style.display='block';
   })
}
fixop.addEventListener('mouseout',function(){
   poption.className='poption hide'
})
poption.addEventListener('mouseout',function(){
   poption.className='poption hide'
})
//回到顶部效果
$(fixlis[4]).on('click',function(){
$('body,html').animate({
   scrollTop:0,
},300)
});
/***********************************************/
    // 事件委托实现数量的加减
    document.querySelector('.shoppingBar').addEventListener('click',function(event){
      let e = event||window.event;
      // 获取到事件源中的文本内容 并且去掉空格
      let content = e.target.innerHTML.trim();
      let number,price;
      switch (content) {
          case '-':
              //获取到当前数量
              number= parseInt(e.target.nextElementSibling.innerHTML)
              if(number<=1){
                  alert('数量最少1件');
                  return false;
              }
              // 数量减1
              e.target.nextElementSibling.innerHTML = --number;
              //获取到单价
              price =parseFloat(e.target.parentNode.nextElementSibling.innerHTML);
              // 计算金额
              e.target.parentNode.nextElementSibling.nextElementSibling.innerHTML = price * number;
              total();
              break;
          case '+':
              //获取到当前数量
              number = parseInt(e.target.previousElementSibling.innerHTML);
              // 数量减1
              e.target.previousElementSibling.innerHTML = ++number;
              //获取到单价
              price =parseFloat(e.target.parentNode.nextElementSibling.innerHTML);
              // 计算金额
              e.target.parentNode.nextElementSibling.nextElementSibling.innerHTML = price * number;
              total();
              break;
          case '删除':
              e.target.parentNode.parentNode.remove();
              total();
              break;
          default:
              if(e.target.className == 'input'){
                  // 勾选操作
                  total();
                  // 是否选中全选
                  if(document.querySelectorAll('.input:checked').length ==document.querySelectorAll('.input').length){
                      document.querySelector('input').checked = true;
                  }else{
                      document.querySelector('input').checked = false;
                  }
              }
              break;
      }
  })
  // 计算总数量信息
  function total(){
      // 查找被选中的input标签
      let inputs = document.querySelectorAll('.input:checked');
      let totalNumber=0,totalMoney=0;
      for(let i =0;i<inputs.length;i++){
          // 获取到当前勾选input的上上级tr标签
          let patrentTr = inputs[i].parentNode.parentNode
          // 计算总数量
          totalNumber += parseInt(patrentTr.children[2].children[1].textContent);
          // 计算总的金额
          totalMoney += parseFloat(patrentTr.children[4].textContent);
      }
      document.querySelectorAll('.buy span')[0].textContent = totalNumber;
      document.querySelectorAll('.buy span')[1].textContent = '¥'+totalMoney;
  }
/***********未登录状态跳转至登录页****************/
$(function(){
    if(userInfo){
        // 用户已经登录
        $.get(baseUrl+'/cart/lists',{userId:userInfo.id},(res)=>{
            // 调用自定义的函数实现页面上数据显示
            showUserCart(res.data);
        },'json');
    }else{
        // 用户没有登录
        $('.false>button').style(display=block)
        let login=document.querySelector('.false>button');
        login.onclick=function(){
           location.href="login.html"
        }
        // 先从localstorage中获取到购物车信息
        let userCart = localStorage.getItem('cart')?JSON.parse(localStorage.getItem('cart')):{};
        console.log(userCart);
        // 循环的目的是为了组装一个数组，后面发送请求
        let goodsIds = [];
        for(let key in userCart){
            // 每一次循环key表示商品的ID
            goodsIds.push(key);
        }
        console.log(userCart);
        if(goodsIds.length >0){
            $.post(baseUrl+'/goods/getGoodsByIds',{goodsIds},(res)=>{
                let data = [];//保存结果
                console.log(res);
                res.data.forEach((item,index)=>{
                    data.push({
                        goodsId:item.id,
                        goodsCount:userCart[item.id],
                        goods:item
                    })
                });
                console.log(data);
                showUserCart(data);
            },'json');
        }
    }

    // 根据购物车数据实现显示商品信息
    function showUserCart(data){
        console.log(data);
        let html = '';
        data.forEach((item,index)=>{
            html +=`<tr>
            <td class="col7">
                <input type="checkbox" class="cartIds">
            </td>
            <td class="col1">
                <a href="">
                    <img src="${item.goods.goodsThumb}" alt="">
                </a>  
                <strong>
                    <a href="">${item.goods.goodsName}</a>
                </strong>
            </td>
            <td class="col2"> 
                <p>颜色：深红</p> 
                <p>尺码：170/92A</p> 
            </td>
            <td class="col3">￥<span>${item.goods.shopPrice}</span></td>
            <td class="col4"> 
                <a href="javascript:;" class="reduce_num"></a>
                <input type="text" name="amount" value="${item.goodsCount}" class="amount">
                <a href="javascript:;" class="add_num"></a>
            </td>
            <td class="col5">￥<span>${item.goodsCount*item.goods.shopPrice}</span></td>
            <td class="col6"><a href="">删除</a></td>
        </tr>`;
        });
        $('.mycart tbody').html(html);
    }
})

//在上面的功能中，当没有登录的情况下，先从localstorage中获取到了购物车数据，然后在通过购物车的商品ID调用接口得到商品信息，未登录状态下整个数据由2个变量构成，所以需要将两个变量的数据融合到一个变量中最后调用showUserCart函数进行渲染，由于目前showUserCart已经以登录状态下数据格式进行了显示，所以需要将未登录状态下的格式转换为登录状态的格式(数组中每个元素为对象，对象下存在goodsId、goodsCount、goods属性)
//在转换过程中建议以未登录下获取到商品的数据为基准进行循环

/****************登陆状态显示********************/